<template>
  <el-form ref="formRef" :model="formData" label-width="100px">
    <el-form-item label="任务标题" prop="taskTitle">
      <el-input
        v-model="formData.taskTitle"
        show-word-limit
        disabled
        :maxlength="200"
      />
    </el-form-item>
    <el-row>
      <el-col :span="6">
        <el-form-item label="交办领导" prop="assignLeader">
          <LeaderSelect
            v-model="formData.assignLeader"
            assignLeaders
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="交办类型" prop="assignType">
          <DictionarySelect
            v-model="formData.assignType"
            disabled
            parent-dictionary-value="taskType"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="交办时间" prop="assignTime">
          <el-date-picker
            v-model="formData.assignTime"
            type="date"
            disabled
            placeholder="请选择"
            value-format="YYYY-MM-DD 00:00:00"
            format="YYYY年MM月DD日"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="当前状态">
          <TaskShow :status="formData.taskStatus" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="任务描述" prop="taskDesc">
      <el-input
        v-model="formData.taskDesc"
        type="textarea"
        disabled
        :autosize="{ minRows: 5 }"
      />
    </el-form-item>
    <el-form-item label="事件列表">
      <ThingShowTable :model-value="formData.matterList" />
    </el-form-item>
    <el-form-item v-if="showProcessOpinion" label="审批意见">
      <el-input
        type="textarea"
        :autosize="{
          minRows: 5,
        }"
        disabled
      />
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { reactive, useTemplateRef } from 'vue'
import { FormInstance } from 'element-plus'
import LeaderSelect from '@/components/leader/LeaderSelect.vue'
import DictionarySelect from '@/components/dictionary/DictionarySelect.vue'
import { getMatterList } from '@/api/mission/task'
import ThingShowTable from '@/components/thing/ThingShowTable.vue'
import TaskShow from '@/components/statusShow/task/TaskShow.vue'

const { showProcessOpinion } = defineProps<{
  showProcessOpinion?: boolean
}>()

const formRef = useTemplateRef<FormInstance>('formRef')

const formData = reactive({
  id: null,
  taskTitle: null,
  assignLeader: null,
  assignType: null,
  assignTime: null,
  taskStatus: 1,
  taskDesc: null,
  matterList: [],
})

defineExpose({ show, close })

async function show(row: any) {
  Object.assign(formData, {
    id: row.id,
    taskTitle: row.taskTitle,
    assignLeader: row.assignLeader,
    assignType: row.assignType,
    assignTime: row.assignTime,
    taskStatus: row.taskStatus,
    taskDesc: row.taskDesc,
  })
  await getMatter()
}

async function getMatter() {
  const { data } = await getMatterList(formData.id)
  if (data.status === 200) {
    formData.matterList = data.data
  }
}

function close() {
  formRef.value.resetFields()
  Object.assign(formData, {
    id: null,
    taskTitle: null,
    assignLeader: null,
    assignType: null,
    assignTime: null,
    taskStatus: 1,
    taskDesc: null,
    matterList: [],
  })
}
</script>

<style scoped lang="scss">
:deep(.el-date-editor) {
  width: 100%;
}
</style>
